<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>zrender</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/zrender/5.4.3/zrender.js"></script>
  </head>
  <body>
    <div id="container" style="width: 800px; height: 800px"></div>
  </body>
</html>
<script>
  // zrender 二次封装 canvas和 svg，echarts 基于 zrender 绘图

  const zr = zrender.init(document.getElementById('container'))

  // 矩形
  const rect = new zrender.Rect({
    shape: {
      x: 0,
      y: 0,
      width: 50,
      height: 50
    },
    style: {
      fill: 'red', // 填充
      lineWidth: 0
    }
  })

  // 线段
  const line = new zrender.Polyline({
    shape: {
      points: [
        [100, 100], // 初始坐标
        [250, 75],
        [300, 100]
      ]
    },
    style: {
      stroke: 'blue',
      lineWidth: 1
    }
  })

  // 圆形
  const circle = new zrender.Circle({
    shape: {
      cx: 50, // 圆心X坐标
      cy: 200,
      r: 50 // 半径
    },
    style: {
      fill: 'red', // 填充
      stroke: 'green', // 边框
      lineWidth: 2 // 边框宽度
    }
  })

  zr.add(rect)
  zr.add(line)
  zr.add(circle)
</script>
